<template>
  <q-page>
    <div class="container">
      <div class="row q-col-gutter-md">
        <div class="col-12">
          <q-form @submit="restartSearch">
            <q-input v-model="search" label="搜索" :hint="`共有 ${count} 条结果`" />
          </q-form>
        </div>
        <div class="col-12">
          <q-list>
            <q-infinite-scroll ref="infiniteScroll"
                               @load="onLoadItem"
                               :offset="250"
                               :debounce="500"
                               :initial-index="0"
                               :scroll-target="scrollTarget">
              <q-item v-for="item in list"
                      :key="item.id"
                      clickable>
                <q-item-section thumbnail>
                  <img :src="item.image" />
                </q-item-section>
                <q-item-section>
                  <q-item-label>{{ item.title }}</q-item-label>
                  <q-item-label caption>{{ item.city }} {{ item.district }} {{ item.address }}</q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-item-label class="text-red text-bold text-h6">
                    均价 {{ item.price }} 元/㎡
                  </q-item-label>
                </q-item-section>
              </q-item>
              <template v-slot:loading>
                <div class="text-center q-my-md">
                  <q-spinner-dots color="primary" size="40px" />
                </div>
              </template>
              <q-item v-show="end">
                <q-item-section>
                  <q-item-label class="text-center" caption>我也是有底线的</q-item-label>
                </q-item-section>
              </q-item>
            </q-infinite-scroll>
          </q-list>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script lang="ts">
import { NewHouse, NewHouseAPI } from 'src/lib/api/NewHouse';
import { defineComponent, ref } from '@vue/composition-api';
import { QInfiniteScroll } from 'quasar';

export default defineComponent({
  name: 'NewHouse',
  setup() {
    const count = ref<number>(0);
    const end = ref<boolean>(false);
    const search = ref<string>('');
    const list = ref<NewHouse[]>([]);
    return {
      scrollTarget: void 0,
      count,
      end,
      search,
      list
    };
  },
  methods: {
    async onLoadItem(index: number, done: (stop?: boolean) => void): Promise<void> {
      const newPage = await NewHouseAPI.list(this.search, index - 1);
      this.count = newPage.count;
      if (newPage.list.length === 0) {
        this.end = true;
        done(true);
      } else {
        newPage.list.forEach(i => {
          if (!this.list.map(n => n.id).includes(i.id)) this.list.push(i);
        })
        done();
      }
    },
    restartSearch(): void {
      const scroll: QInfiniteScroll | null = this.$refs.infiniteScroll as QInfiniteScroll;
      if (scroll) {
        this.end = false;
        this.list = [];
        scroll.reset();
        scroll.resume();
        scroll.trigger();
      }
    }
  }
});
</script>
